<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        对比	        methods方法	                    计算属性	                          监视器
        返回值结果	    不具有缓存	                     具有缓存	                       -----(监视是无法在模板中调用)
        调用方式	    需要开发者代码作为方法调用	      需要开发者代码作为属性调用	      监控变量变化自动触发
        方法this	    当前vue实例	                    当前vue实例	                      当前vue实例
        构成依赖	     可以依赖实例仓库变量，          如果需要定义有意义的计算属性，       定义时必须明确监控的vue实例的数据变量
                        也可以不依赖                    必须完成实例变量的依赖操作
        异步支持	     如果是普通方法调用支持异步操作	   计算属性方法中可以调用异步请求	     支持
                        如果作为取值方法等效与计算属性    但不能实现计算属性功能
                                                       （需要通过同步return得到结果）

        实际使用	     提供模板事件的回调支持	           提供复杂模板逻辑的JS代码化	      异步的数据对接（校验功能）
        </pre>
        <p>info:{{ info }}</p>
        <input v-model="info" type="text" />
        <hr>
        <p>{{ msg }}.end</p>
        <p>{{ msg+'.end' }}</p>
        <hr>
        <p>{{ newMsg }}</p>
        <p>{{ newMsg }}</p>
        <hr>
        <p>{{ getMsg() }}</p>
        <p>{{ getMsg() }}</p>
        <hr>
        <p>word:{{ word }}</p>
        <p>getWord:{{ getWord() }}</p>
        <p>ajaxMsg：{{ ajaxMsg }}</p>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        import axios from "../assets/axios/axios.js";
        createApp({
            data() {
                return {
                    msg:"msg",
                    info:"info",
                    // text:"text",
                    ajaxMsg:"loading……"
                }
            },
            computed: {
                newMsg() {
                    console.log("computed-newMsg")
                    return this.msg+".end" 
                },
                text(){
                    return "text"
                },
                async word(){
                    // return axios.get("http://127.0.0.1:3000/api/word")
                    //     // 解构赋值
                    //     .then(( {data} )=>{
                    //         console.log(data)
                    //         return data;
                    //     })
                    // return "word"
                    let response = await axios.get("http://127.0.0.1:3000/api/word")
                    console.log( response.data )
                    return response.data
                }
            },
            watch: {
                msg(newValue, oldValue) {
                    console.log("msg-watch")
                },
                test:{
                    handler:async function(){
                        let response = await axios.get("http://127.0.0.1:3000/api/word")
                        console.log("watch",response.data )
                        this.ajaxMsg = response.data;
                    },
                    immediate:true
                }
            },
            methods: {
                getMsg() {
                    console.log("methods-getMsg")
                    return this.msg+".end" 
                },
                show(){
                    alert("提示")
                },
                async getWord(){
                    console.log("getWord")
                    // return "getWord"
                    // return axios.get("http://127.0.0.1:3000/api/word")
                    //     // 解构赋值
                    //     .then(( {data} )=>{
                    //         console.log(data)
                    //         return data;
                    //     })
                    let response = await axios.get("http://127.0.0.1:3000/api/word")
                    console.log( response.data )
                    return response.data
                }
            },
        }).mount("#app")
    </script>
</body>
</html>